<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>index</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link
     href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"
     rel="stylesheet" />
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script
     src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js">
     
</script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
     src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js">
     
</script>
</head>
<body>
     <form id="form1" class="well"
          style="width: 30em; margin: auto; margin-top: 150px;">
          <h3>用户注册</h3>
          <div class=" input-group input-group-md">
              <span class="input-group-addon" id="sizing-addon1"><i
                   class="glyphicon glyphicon-user" aria-hidden="true"></i></span> <input
                   id="userName" type="text" class="form-control" placeholder="用户名(邮箱)"
                   aria-describedby="sizing-addon1" />
          </div>
          <br />
          <div class="input-group input-group-md">
              <span class="input-group-addon" id="sizing-addon1"><i
                   class="glyphicon glyphicon-lock" aria-hidden="true"></i></span> <input type="password"
                   id="password" class="form-control" placeholder="密码"
                   aria-describedby="sizing-addon1" />
          </div>
		  <br />
          <div class="input-group input-group-md">
              <span class="input-group-addon" id="sizing-addon1"><i
                   class="glyphicon glyphicon-lock" aria-hidden="true"></i></span> <input type="password"
                   id="surepassword" class="form-control" placeholder="确认密码"
                   aria-describedby="sizing-addon1" />
          </div>
		  <br />
		  <div class="input-group input-group-md">
              <span class="input-group-addon" id="sizing-addon1"><i
                   class="glyphicon glyphicon-lock" aria-hidden="false"></i></span> <input type="text"
                   id="code" class="form-control" placeholder="验证码"
                   aria-describedby="sizing-addon1" />
          </div>
		    <br />
		  <input type="button" value="获取验证码" id="click" onclick="foo(this, 10000);"/>
		    <br />
          <button type="button" class="btn btn-success btn-block">注册</button>
     </form>
     <script>
          $("#form1").on("click",".btn",function(e){
              var email = $("#userName").val();
              var password=$("#password").val();
			  var code = $("#code").val();
              $.ajax({
                   url:"http://www.test.com/api/user/register",
                   type:"post",
                   data:{"email":email,"password":password,"code":code},
                   dataType:"text",
                   success:function(result){
                        if("yes"==result){
							 alert("注册成功");
                             window.location.href = "http://www.test.com/static/login.html";
                        }else{
                             alert(result);
                        }
                   }
              })
          });
		  
		var countdown = 600;
		function foo(obj, time) {
			obj.disabled = true;
			setTimeout(function() {
				var x = setInterval(function(){
						time= time - 1000; //reduce each second
						obj.value = (time/1000)%60;
						if(time==0){
								clearInterval(x);
								obj.value = "获取验证码";
								obj.disabled = false;
						}
				}, 1000);
			}, time-10000);
			var email = $("#userName").val();
			$.ajax({
                   url:"http://www.test.com/api/code/createCode",
                   type:"post",
                   data:{"email":email},
                   dataType:"text",
                   success:function(result){
                        if("yes"==result){
                             alert("获取成功");
                        }else{
                             alert("用户名或者密码不对");
                        }
                   }
              })
		}

     </script>
</body>
</html>